<!--百分比仪表盘-->

<template>
  <div class="w-h-full">
    <div v-if="shade" class="shade"></div>
    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'PercentGaugeChart',
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '2.1',
      configDataTemp: Object.assign({

        chartOption: {
          title: PnDesigner.buildTitleConfigData(),
          outsideGauge: {
            radius: '90%',
            min: 0,  // 最小刻度
            max: 100,  // 最大刻度
            splitNumber: 10,
            axisLabel: {
              show: true,
              color: '#2196f3',
              distance: 25
            },
            axisTick: {
              show: true,
              splitNumber: 10,
              lineStyle: {
                color: '#fff'
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            }
          },
          insideGauge: {
            radius: '65%',
            center: ['50%', '50%'],
            color: {
              startColor: '',
              endColor: '',
              innerStrokeColor: '#323232'
            },
            title: {
              show: true,
              offsetCenter: ['0', '-26%'], // x, y，单位px
              textStyle: {
                color: '#fff',
                fontSize: 20
              }
            },
            detail: {
              show: true,
              offsetCenter: [0, '5%'],
              textStyle: {
                color: '#fff',
                fontSize: 30
              },
              suffixText: '%'
            }
          }
        },

      }, PnDesigner.buildFuncCompDatasourceField({
        ds_resultObjTemplate: [
          {
            field: 'name',
            remark: '类目'
          },
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {
            'name': '成交率',
            'value': 0.65
          },
        ],
        ds_useFilter: true,
        ds_useTimer: true,
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {}
    },
    mounted() {

      this.init();

      this.setTimer(() => {
        this.init()
      })
    },
    methods: {

      init() {
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        });
      },

    },
    computed: {
      chartOption() {

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          series: [
            {
              name: '刻度',
              type: 'gauge',
              radius: this.component.compConfigData.chartOption.outsideGauge.radius,
              min: this.component.compConfigData.chartOption.outsideGauge.min, //最小刻度
              max: this.component.compConfigData.chartOption.outsideGauge.max, //最大刻度
              splitNumber: this.component.compConfigData.chartOption.outsideGauge.splitNumber, //刻度数量
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 1,
                  color: [
                    [1, 'rgba(0,0,0,0)']
                  ]
                }
              }, //仪表盘轴线
              axisLabel: {
                show: this.component.compConfigData.chartOption.outsideGauge.axisLabel.show,
                color: this.component.compConfigData.chartOption.outsideGauge.axisLabel.color,
                distance: this.component.compConfigData.chartOption.outsideGauge.axisLabel.distance,
                // formatter: function(v) {
                //     switch (v + '') {
                //         case '0':
                //             return '0';
                //         case '2':
                //             return '2W';
                //         case '4':
                //             return '4W';
                //         case '6':
                //             return '6W';
                //         case '8':
                //             return '8W';
                //         case '10':
                //             return '10W';
                //         case '12':
                //             return '12W';
                //         case '14':
                //             return '14W';
                //         case '16':
                //             return '16W';
                //     }
                // }
              }, //刻度标签。
              axisTick: {
                show: this.component.compConfigData.chartOption.outsideGauge.axisTick.show,
                splitNumber: this.component.compConfigData.chartOption.outsideGauge.axisTick.splitNumber,
                lineStyle: {
                  color: this.component.compConfigData.chartOption.outsideGauge.axisTick.lineStyle.color,
                  width: 1,
                },
                length: -8
              }, //刻度样式
              splitLine: {
                show: this.component.compConfigData.chartOption.outsideGauge.splitLine.show,
                length: -20,
                lineStyle: {
                  color: this.component.compConfigData.chartOption.outsideGauge.splitLine.lineStyle.color
                }
              }, //分隔线样式
              detail: {
                show: false
              },
              pointer: {
                show: false
              }
            },
            {
              type: 'gauge',
              radius: this.component.compConfigData.chartOption.insideGauge.radius,
              center: this.component.compConfigData.chartOption.insideGauge.center,
              splitNumber: 0, //刻度数量
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 15,
                  color: [
                    [
                      this.runCustomFilter(this.component.compConfigData.ds_resultObj)[0].value,
                      new this.$Echarts.graphic.LinearGradient(
                      0, 0, 1, 0, [{
                        offset: 0,
                        color: this.component.compConfigData.chartOption.insideGauge.color.startColor
                          ? this.component.compConfigData.chartOption.insideGauge.color.startColor: this.currentEchartThemeColors[0]
                      },
                        {
                          offset: 1,
                          color: this.component.compConfigData.chartOption.insideGauge.color.endColor
                            ? this.component.compConfigData.chartOption.insideGauge.color.endColor : this.currentEchartThemeColors[7]
                        }
                      ]
                    )
                    ],
                    [
                      1, this.component.compConfigData.chartOption.insideGauge.color.innerStrokeColor
                    ]
                  ]
                }
              },
              //分隔线样式。
              splitLine: {
                show: false,
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              pointer: {
                show: false
              },
              title: {
                show: this.component.compConfigData.chartOption.insideGauge.title.show,
                offsetCenter: this.component.compConfigData.chartOption.insideGauge.title.offsetCenter, // x, y，单位px
                textStyle: {
                  color: this.component.compConfigData.chartOption.insideGauge.title.textStyle.color,
                  fontSize: this.component.compConfigData.chartOption.insideGauge.title.textStyle.fontSize
                }
              },
              //仪表盘详情，用于显示数据。
              detail: {
                show: this.component.compConfigData.chartOption.insideGauge.detail.show,
                offsetCenter: this.component.compConfigData.chartOption.insideGauge.detail.offsetCenter,
                formatter: (params) => {
                  return (params * 100).toFixed(0) + this.component.compConfigData.chartOption.insideGauge.detail.suffixText
                },
                textStyle: {
                  color: this.component.compConfigData.chartOption.insideGauge.detail.textStyle.color,
                  fontSize: this.component.compConfigData.chartOption.insideGauge.detail.textStyle.fontSize
                }
              },
              data: []
            }
          ]
        };

        option.series[1].data = this.runCustomFilter(this.component.compConfigData.ds_resultObj);

        // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
        option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

        return option;
      }
    },
    watch: {}
  };

  export default _this
</script>

<style scoped>

</style>
